<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>产品管理</title>
<meta name="decorator" content="default" />
<script type="text/javascript"
	src="/jeesite/static/jquery-validation/1.11.1/localization/messages_zh.js"></script>
<script type="text/javascript"
	src="/jeesite/static/jquery-tablesorter/jquery.tablesorter.js"></script>
<link href="/jeesite/static/jquery-tablesorter/themes/blue/style.css"
	rel="stylesheet" type="text/css">
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						//表格排序插件
						$.tablesorter.defaults.headers = {
							6 : {
								sorter : false
							},
							7 : {
								sorter : false
							},
							10 : {
								sorter : false
							},
							11 : {
								sorter : false
							}
						};
						//开启表格排序
						$("#contentTable").tablesorter();

						$("#btnExport")
								.click(
										function() {
											top.$.jBox
													.confirm(
															"确认要导出产品数据吗？",
															"系统提示",
															function(v, h, f) {
																if (v == "ok") {
																	$(
																			"#searchForm")
																			.attr(
																					"action",
																					"${ctx}/cg/component/export");
																	$(
																			"#searchForm")
																			.submit();
																}
															},
															{
																buttonsFocus : 1
															});
											top.$('.jbox-body .jbox-icon').css(
													'top', '55px');
										});
						$("#btnImport")
								.click(
										function() {
											$
													.jBox(
															$("#importBox")
																	.html(),
															{
																title : "导入数据",
																buttons : {
																	"关闭" : true
																},
																bottomText : "导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！"
															});
										});
					});

	function openRecord(e) {

		var x = Math.random();
		var url = e.getAttribute("data-name");
		var componentName = e.getAttribute("data-id");
		$('#componentName1').html(
				"<h4>" + " " + componentName + " 出入库记录" + "</h4>");
		$('#record').modal({
			keyboard : true,
			remote : url + "&" + x
		});
	};

	function openIn(i) {

		var x = Math.random();
		var url = i.getAttribute("data-name");
		var componentName = i.getAttribute("data-id");
		$('#componentName2').html("<h4>" + " " + componentName + "</h4>");
		$('#in').modal({
			keyboard : true,
			remote : url + "&" + x
		});
	};
	function openOut(i) {

		var x = Math.random();
		var url = i.getAttribute("data-name");
		var componentName = i.getAttribute("data-id");
		$('#componentName3').html("<h4>" + " " + componentName + "</h4>");
		$('#out').modal({
			keyboard : true,
			remote : url + "&" + x
		});
	};
	
	function page(n, s) {
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").attr("action", "${ctx}/cg/component");
		$("#searchForm").submit();
		return false;
	};
</script>
</head>
<body>

	<div id="importBox" class="hide">
		<form id="importForm" action="${ctx}/cg/component/import"
			method="post" enctype="multipart/form-data" class="form-search"
			style="padding-left: 20px; text-align: center;"
			onsubmit="loading('正在导入，请稍等...');">
			<br /> <input id="uploadFile" name="file" type="file"
				style="width: 330px" required="required"/><br /> <br /> <input id="btnImportSubmit"
				class="btn btn-primary" type="submit" value="   导    入   " /> <a
				href="${ctx}/cg/component/import/template">下载模板</a>
		</form>
	</div>

	<ul class="nav nav-tabs">
		<li class="active"> <shiro:hasPermission name="cg:component:viewComponentList"> <a href="${ctx}/cg/component/">元器件列表</a></shiro:hasPermission></li>
		<shiro:hasPermission name="cg:component:edit"> 
			<li><a href="${ctx}/cg/component/form">产品添加</a></li>
		</shiro:hasPermission> 
		<li> <shiro:hasPermission name="cg:component:viewComponentRecord"><a href="${ctx}/cg/componentRecord">元器件出入库记录</a> </shiro:hasPermission> </li>
	</ul>
	<!-- modelAttribute="product" -->
	<form:form id="searchForm" modelAttribute="component"
		action="${ctx}/cg/component/" method="post"
		class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
		<input id="pageSize" name="pageSize" type="hidden"
			value="${page.pageSize}" />
		<sys:tableSort id="orderBy" name="orderBy" value="${page.orderBy}"
			callback="page();" />
		<ul class="ul-form">
			<li><label>产品名称：</label> <form:input path="name"
					htmlEscape="false" maxlength="64" class="input-medium" /></li>
			<li><label>型号：</label> <form:input path="model"
					htmlEscape="false" maxlength="64" class="input-medium" /></li>
			<li><label>封装：</label> <form:input path="pack"
					htmlEscape="false" maxlength="64" class="input-medium" /></li>
			<li><label>规格：</label> <form:input path="spec"
					htmlEscape="false" maxlength="64" class="input-medium" /></li>
			<li><label>库位：</label> <form:input path="location"
					htmlEscape="false" maxlength="64" class="input-medium" /></li>

			<li class="btns">
				<shiro:hasPermission name="cg:component:viewComponentList">
				<input id="btnSubmit" class="btn btn-primary"
				type="submit" value="查询" onclick="return page();" /> 
				</shiro:hasPermission> 
				<shiro:hasPermission name="cg:component:edit">
				<input
				id="btnImport" class="btn btn-primary" type="button" value="导入数据" />
				</shiro:hasPermission> 
				<shiro:hasPermission name="cg:component:viewComponentList">
				<input id="btnExport"
				class="btn btn-primary" type="button" value="导出数据" />
				</shiro:hasPermission> 
			</li>
			<li class="clearfix"></li>
		</ul>

	</form:form>
	<sys:message content="${message}" />
	<table id="contentTable"
		class="table table-striped table-bordered table-condensed tablesorter">
		<thead>
			<tr>
				<th>名称</th>
				<th>型号</th>
				<th>封装</th>
				<th>规格</th>
				<th>库位</th>
				<th>库存数量</th>
				<th>单位</th>
				<th>安全库存</th>
				<th>是否采购</th>
				<th>最后更新时间</th>
				<th>备注</th>

				
					<th>操作</th>
				
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${page.list}" var="component">
				<tr>
					<td><a data-id="${component.name}"
						data-name="${ctx}/cg/componentRecord/queryComponentRecordListById?component.id=${component.id}"
						onclick="openRecord(this)">${component.name}</a></td>
					<td>${component.model}</td>
					<td>${component.pack}</td>
					<td>${component.spec}</td>
					<td>${component.location}</td>
					<td>${component.repertoryNum}</td>
					<td>${component.unit}</td>
					<td>${component.repertoryNumSafety}</td>
					<c:if
						test="${component.repertoryNum<component.repertoryNumSafety}">
						<td><font color="red">需要采购</font></td>
					</c:if>
					<c:if test="${component.repertoryNum>=component.repertoryNumSafety}">
						<td><font color="green">不需采购</font></td>
					</c:if>

					<td><fmt:formatDate value="${component.updateDate}"
							pattern="yyyy-MM-dd HH:mm:ss" /></td>
					<td>${component.remarks}</td>
					
						<td>
						<shiro:hasPermission name="cg:component:out">
						<a data-id="${component.name}"
							data-name="${ctx}/cg/component/out?id=${component.id}"
							data-toggle="modal" onclick="openOut(this)">出库</a> 
							</shiro:hasPermission>
							<shiro:hasPermission name="cg:component:in">
							<a data-id="${component.name}"
							data-name="${ctx}/cg/component/in?id=${component.id}"
							data-toggle="modal" onclick="openIn(this)">入库</a> 
							</shiro:hasPermission>
							<shiro:hasPermission name="cg:component:edit">
							<a
							href="${ctx}/cg/component/form?id=${component.id}">修改</a> <a
							href="${ctx}/cg/component/delete?id=${component.id}"
							onclick="return confirmx('确认要删除该产品吗？', this.href)">删除</a>
							</shiro:hasPermission>
							</td>
					
				</tr>






			</c:forEach>


			<div id="in" class="modal hide fade" tabindex="-1"
				role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<div id="componentName2"></div>
				</div>
				<div class="modal-body"></div>
			</div>
			
			<div id="out" class="modal hide fade" tabindex="-1"
				role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<div id="componentName3"></div>
				</div>
				<div class="modal-body"></div>
			</div>

			<div id="record" class="modal hide fade" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<div id="componentName1"></div>
				</div>
				<div class="modal-body"></div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
</body>
</html>